import React from 'react';
import { observer } from 'mobx-react';
import { WeaSwitch } from 'comsMobx';
import { WeaFormItem, WeaTools, WeaDialog, WeaLocaleProvider } from 'ecCom';
import { ShareStoreProps } from '../../stores/list/ShareStore';
import { Row, Col, Button, Input } from 'antd';
import { toJS } from 'mobx';
import { WeaError, WeaInputNumber } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
const InputGroup = Input.Group;

export interface BatchShareProps {
    share: ShareStoreProps;
    params?: any;
    success?: Function;
    iconInfo?: any;
}


@observer
export default class BatchShare extends React.Component<BatchShareProps, any> {
    constructor(props) {
        super(props);
        const { conditions } = this.props.share;
        this.state = {
            showlevel0: conditions.showlevel.valueList.length > 0 && (conditions.showlevel.valueList[0] + "") || conditions.showlevel.startValue || "",
            showlevel1: conditions.showlevel.valueList.length > 1 && (conditions.showlevel.valueList[1] + "") || ""
        }
    }

    render() {
        const { share } = this.props;
        const { conditions, form, refObj } = share;
        const errors = toJS(share.errors);
        let formParams = form.getFormParams();
        let values = form.values();
        let relatedid = conditions[`relatedid${values.sharetype}`]
        let rolefield = conditions[`rolefield${values.rolefieldtype}`];
        let relatedidError = errors[`relatedid${values.sharetype}`];
        let rolefieldError = errors[`rolefield${values.rolefieldtype}`];
        
        return (
            <div className="cube-batch-share wea-search-group" style={{ marginTop: 3 }}>
                {
                    conditions.sharetype &&
                    <WeaFormItem
                        style={{paddingTop: 0,paddingBottom:0,minHeight:45}}
                        label={conditions.sharetype.label}
                        labelCol={{ span: conditions.sharetype.labelcol }}
                        wrapperCol={{ span: conditions.sharetype.fieldcol }}
                    >
                        <div style={{ display: 'inline-block' }}>
                            <WeaSwitch fieldConfig={conditions.sharetype} form={form} formParams={formParams}
                                       onChange={share.clearError.bind(this, WeaTools.getKey(conditions.sharetype))}/>
                        </div>
                        <div style={{ paddingLeft: 8, display: 'inline-block', width: "100px" }}>
                            {(values.sharetype == '2' || values.sharetype == '3') && conditions.orgrelation &&
                            <WeaSwitch fieldConfig={conditions.orgrelation} form={form} formParams={formParams}/>}
                        </div>
                    </WeaFormItem>
                }
                {
                    relatedid && <WeaFormItem
                        style={{paddingTop: 0,paddingBottom:0,minHeight:45}}//WeaFormItem的样式是padding-top:8px,padding-bottom:8px.当多个WeaFormItem嵌套时，会对不齐。
                        label={relatedid.label}
                        labelCol={{ span: relatedid.labelcol }}
                        wrapperCol={{ span: relatedid.fieldcol }}
                    >
                        <WeaSwitch fieldConfig={relatedid} form={form} formParams={formParams}
                                   onChange={share.clearError.bind(this, WeaTools.getKey(relatedid))}/>
                        <div className="form-item-error"
                             dangerouslySetInnerHTML={{ __html: relatedidError && `<span style="color:#f50;"><i class="anticon anticon-cross-circle" ></i>${relatedidError}</span>` }}/>
                    </WeaFormItem>
                }
                {
                    values.sharetype == '4' && conditions.isRoleLimited && <WeaFormItem
                        style={{paddingTop: 0,paddingBottom:0,minHeight:45}}
                        label={conditions.isRoleLimited.label}
                        labelCol={{ span: conditions.isRoleLimited.labelcol }}
                        wrapperCol={{ span: conditions.isRoleLimited.fieldcol }}
                    >
                        <Row>
                            <Col span={6} style={{ width: 60 }}>
                                <WeaSwitch fieldConfig={conditions.isRoleLimited} form={form} formParams={formParams}/>
                            </Col>
                            <Col span={9} style={{ width: 200 }} className="cube-auth-child-cell">
                                {values.isRoleLimited == '1' && conditions.rolefieldtype &&
                                <WeaFormItem
                                    style={{paddingTop: 0,paddingBottom:0,minHeight:45}}
                                    label={conditions.rolefieldtype.label}
                                    labelCol={{ span: conditions.rolefieldtype.labelcol }}
                                    wrapperCol={{ span: conditions.rolefieldtype.fieldcol,offset:10 }}
                                >
                                    <WeaSwitch fieldConfig={conditions.rolefieldtype} form={form}
                                               formParams={formParams}
                                               onChange={share.clearError.bind(this, WeaTools.getKey(conditions.rolefieldtype))}/>
                                    <div className="form-item-error"
                                         dangerouslySetInnerHTML={{ __html: errors.rolefieldtype && `<span style="color:#f50;"><i class="anticon anticon-cross-circle" ></i>${errors.rolefieldtype}</span>` }}/>
                                </WeaFormItem>
                                }
                            </Col>
                            <Col span={9} style={{ width: 'calc(100% - 280px)' }} className="cube-auth-child-cell">
                                {values.isRoleLimited == '1' && rolefield &&
                                <WeaFormItem
                                    style={{paddingTop: 0,paddingBottom:0,minHeight:45,width:150}}
                                    label={rolefield.label}
                                    labelCol={{ span: rolefield.labelcol }}
                                    wrapperCol={{ span: rolefield.fieldcol,offset:10 }}
                                >
                                    <WeaSwitch fieldConfig={rolefield} form={form} formParams={formParams}
                                               onChange={share.clearError.bind(this, WeaTools.getKey(rolefield))}/>
                                    <div className="form-item-error"
                                         dangerouslySetInnerHTML={{ __html: rolefieldError && `<span style="color:#f50;"><i class="anticon anticon-cross-circle" ></i>${rolefieldError}</span>` }}/>
                                </WeaFormItem>
                                }
                            </Col>
                        </Row>
                    </WeaFormItem>
                }
                {
                    values.sharetype == '4' && conditions.rolelevel && <WeaFormItem
                        style={{paddingTop: 0,paddingBottom:0,minHeight:45}}
                        label={conditions.rolelevel.label}
                        labelCol={{ span: conditions.rolelevel.labelcol }}
                        wrapperCol={{ span: conditions.rolelevel.fieldcol }}
                    >
                        <WeaSwitch fieldConfig={conditions.rolelevel} form={form} formParams={formParams}/>

                    </WeaFormItem>
                }
                {
                    values.sharetype == '6' && conditions.joblevel && <WeaFormItem
                        style={{paddingTop: 0,paddingBottom:0,minHeight:45}}
                        label={conditions.joblevel.label}
                        labelCol={{ span: conditions.joblevel.labelcol }}
                        wrapperCol={{ span: conditions.joblevel.fieldcol }}
                    >
                        <Row>
                            <Col span={6} style={{ width: 100 }}>
                                <WeaSwitch fieldConfig={conditions.joblevel} form={form} formParams={formParams}/>
                            </Col>
                            <Col style={{ paddingLeft: 8, display: 'inline-block', marginTop: '-3px' }} span={8}>
                                {values.joblevel == '0' && conditions.jobleveltext1 &&
                                [<WeaSwitch key={values.joblevel} fieldConfig={conditions.jobleveltext1} form={form}
                                            formParams={formParams}
                                            onChange={share.clearError.bind(this, WeaTools.getKey(conditions.jobleveltext1))}/>,
                                    <div className="form-item-error"
                                         dangerouslySetInnerHTML={{ __html: errors.jobleveltext1 && `<span style="color:#f50;"><i class="anticon anticon-cross-circle" ></i>${errors.jobleveltext1}</span>` }}/>
                                ]}
                                {values.joblevel == '1' && conditions.jobleveltext2 &&
                                [<WeaSwitch key={values.joblevel} fieldConfig={conditions.jobleveltext2} form={form}
                                            formParams={formParams}
                                            onChange={share.clearError.bind(this, WeaTools.getKey(conditions.jobleveltext2))}/>,
                                    <div className="form-item-error"
                                         dangerouslySetInnerHTML={{ __html: errors.jobleveltext2 && `<span style="color:#f50;"><i class="anticon anticon-cross-circle" ></i>${errors.jobleveltext2}</span>` }}/>
                                ]
                                }
                            </Col>
                        </Row>
                    </WeaFormItem>
                }
                {
                    values.sharetype != '1' && conditions.showlevel && <WeaFormItem
                        style={{paddingTop: 0,paddingBottom:0,minHeight:45}}
                        label={conditions.showlevel.label}
                        labelCol={{ span: conditions.showlevel.labelcol }}
                        wrapperCol={{ span: conditions.showlevel.fieldcol }}
                    >
                        {/*<WeaSwitch fieldConfig={conditions.showlevel} form={form} formParams={formParams} />*/}

                        <InputGroup>
                            <Col span={6}>
                                <WeaError tipPosition='bottom'
                                          error={getLabel(683, "安全级别") + getLabel(21423, "未填写")}
                                          style={{ width: "100%" }}
                                          ref={ref => {
                                              refObj["showlevel"] = ref;
                                          }}
                                >
                                    <WeaInputNumber
                                        id="showlevel" fieldName="showlevel" name="showlevel"
                                        value={this.state.showlevel0}
                                        onChange={(v) => {
                                            if (v !== undefined) {
                                                form.$('showlevel').value[0] = v;
                                                this.setState({ showlevel0: v })
                                            }
                                        }}
                                        viewAttr="3"/>
                                </WeaError>
                            </Col>
                            <Col span={1} style={{paddingTop:4}}>
                                <p className="ant-form-split">-</p>
                            </Col>
                            <Col span={6}>
                                <WeaInputNumber
                                    value={this.state.showlevel1}
                                    onChange={(v) => {
                                        if (v !== undefined) {
                                            form.$('showlevel').value[1] = v;
                                            this.setState({ showlevel1: v })
                                        }
                                    }}
                                />
                            </Col>
                        </InputGroup>
                    </WeaFormItem>
                }
                {
                    conditions.righttype && <WeaFormItem
                        style={{paddingTop: 0,paddingBottom:0,minHeight:45}}
                        label={conditions.righttype.label}
                        labelCol={{ span: conditions.righttype.labelcol }}
                        wrapperCol={{ span: conditions.righttype.fieldcol }}
                    >
                        <WeaSwitch fieldConfig={conditions.righttype} form={form} formParams={formParams}/>

                    </WeaFormItem>
                }
            </div>
        )
    }
}

@observer
export class BatchShareDialog extends React.Component<BatchShareProps, any> {
    getButtons=()=>{
        const { share } = this.props;
        return  [
            <Button onClick={share.onCancel}>{getLabel(309, "关闭")}</Button>,
            <Button type="primary" loading={share.loading} onClick={this.onOk}>{getLabel(86, '保存')}</Button>
        ]
    }
    onOk = () =>{
        const { share, params, success } = this.props;
        share.onOk( params, success);
    }
    render() {
        const { share,  iconInfo } = this.props;
        return (
            <WeaDialog
                className='wea-auth-modal cube-dialog'
                buttons={this.getButtons()}
                title={getLabel(18037, '批量共享')}
                iconBgcolor={iconInfo.iconBg || "#96358a"}
                icon={iconInfo.icon || 'icon-coms-ModelingEngine'}
                iconFontColor={iconInfo.iconColor || "#fff"}
                visible={share.visible}
                style={{ width: 650, height: 450 }}
                hasScroll={true}
                onCancel={share.onCancel}
            >
                <div>
                    <BatchShare share={share}/>
                </div>
            </WeaDialog>
        )
    }
}

export const getBatchShare = (store) => {
    return (
        <BatchShare
            share={store}
        />
    )
}
